<template>
  <div class="layout">
    <popup :pupData="pupData" @sureFun="sureFun" @cancelFun="cancelFun" ref="popupref"/>
    <div class="container" @click="itemClick">
      <div v-if="goodsCountMoreThanOne" class="img-container">
        <img class="goods-pic" v-for="(imgUrl,index) in getImgList" v-lazy="imgUrl" :key="index"/>
      </div>
      <div v-else class="img-container" style="align-items: flex-start">
        <img class="goods-pic" v-lazy="item.buy_list[0].good.pic"/>
        <div class="flex-c" style="margin-left: 10px;margin-top: 2vw;align-items: flex-start">
          <span class="title" v-text="item.buy_list[0].good.title"></span>
          <span class="sub-title" v-text="item.buy_list[0].good.attr[0].value"></span>
        </div>
        <div style="flex: 1"></div>
      </div>
      <div class="flex-r">
        <img :src="getIcon('more')" style="width: 4vw" v-show="showEllipsis"/>
        <img :src="getIcon('arrow_right_hui')" class="icon-right"/>
      </div>
    </div>
    <div class="divider" style="margin-top: 10px"></div>
    <div class="flex-r" style="width: 100vw;margin: 2vw 0">
      <span class="time" v-text="dateFormat"></span>
      <!--<span v-show="tuiState"-->
            <!--@click="delOrderOut"-->
            <!--style="flex: 1;text-align: left;padding-left: 2vw;color: #E7395A;">删除</span>-->
      <!--<span class="total-price" v-text="getType"></span>-->
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import Public from '@/assets/js/public';
  import Moment from 'moment';

  export default {
    /** kebab-case */
    name: 'item-order',

    data() {
      return {
        item: this.itemObj,
        orderImg: [],
        tuiState: false,
        trade: this.tradeStatus, // 交易状态
        pupData: {
          des: '确认',
          cancel: '取消',
          sure: '确定'
        } // 弹窗提示文字
      };
    },
    /** 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
     String/Number/Boolean/Function/Object/Array/Symbol */
    props: {
      itemObj: {
        required: true
      },
      orderType: {
        required: true,
        type: String
      },
      index: {
        require: true,
        type: Number
      },
      type: {
        type: String
      },
      tradeStatus: {
        type: String
      }
    },

    components: {},
    methods: {
      getIcon(icon) {
        return Public.iconImg + icon + '.svg';
      },
      itemClick() {
        this.$emit('onItemCLick', this.index);
      },
      delOrderOut() {
        // 删除订单前
        this.pupData.des = '确定删除当前订单?';
        this.$refs.popupref.switchState();
      },
      delOrder() {
        //  删除订单
        this.loading = true;
        this.$UserReq.delUserOrder({oid: this.itemObj.id}).then(res => {
          if (res.status === 'ok') {
            location.reload();
            this.loading = false;
          } else {
            alert(res.msg);
          }
        }, () => {
          this.loading = false;
        });
      },
      sureFun() {
        this.$refs.popupref.switchState();
        this.delOrder();
      },
      cancelFun() {
        this.$refs.popupref.switchState();
      }
    },
    computed: {
      goodsCountMoreThanOne() {
        return this.item.buy_list.length > 1;
      },
      getType() {
        if (this.orderType === 'normal') {
          return '¥' + this.item.money;
        } else {
          return this.item.money + '积分';
        }
      },
      dateFormat() {
        // 时间
        return Moment(this.item.created * 1000).format('YYYY-MM-DD HH:mm');
      },
      getImgList() {
        let list = [];
        this.item.buy_list.map((res, index) => {
          list.push(res.good.pic);
        });
        return list;
      },
      showEllipsis() {
        return this.item.buy_list.length > 3;
      }
    },
    watch: {
      // 监听具体数据变化，并做相应的处理
      itemObj: function (val) {
        this.item = val;
      },
      tradeStatus(val) {
        this.trade = val;
      }
    },
    created() {
      if (this.type === 'receive' || this.type === 'refund' || this.type === 'after') {
        this.tuiState = true;
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()

  .layout
    background-color white
    flex-y()
    margin-bottom 10px

  .container
    display flex
    flex-direction row
    justify-content space-between
    align-items center
    width 100vw
    padding-top 10px

  .img-container
    margin-left 10px
    width 84vw
    display flex
    flex-direction row
    justify-content flex-start
    align-items center

  .icon-right
    width 5vw
    margin-right 10px
    margin-left 4px

  .goods-pic {
    padding-left 1vw
    width 24vw
    height: 24vw;
  }

  /*height 24vw*/

  .time
    word-tip()
    margin-left 10px

  .status
    word-vw(12, main-color);
    margin-right 10px
    border(main-color);
    border-radius(20px);
    padding 2px 3vw

  .close {
    word-vw(12, third-ash);
    border(third-ash);
  }

  .total-price
    word-main()
    margin-right 10px

  .sub-title
    word-vw(12, third-ash);
    margin-top 2vw

  .title
    word-main()
    line-height 1.5

  .img-wrapper[lazy=loading] {
    background third-ash
    width: 100%;
    height: 10vw
  }

</style>
